<div class="message">
  <div class="row">
    <div class="col">
      <button type="button" class="btn btn-primary">发布资讯</button>
    </div>
    <div class="col-4">
      
    </div>
    <div class="col--1">
      <h5>所属栏目</h5>
    </div>
    <div class="col-2">
      <select class="form-control">
        <option value="" class="val" disabled selected hidden>请选择所属栏目</option>
      </select>
    </div>
    <div class="col--1">
      <h5>标题</h5>
    </div>
    <div class="col-2">
      <form>
        <div class="form-group">
          <input type="text" class="form-control titles">
        </div>
      </form>
    </div>
    <div class="col--1">
      <button type="button" class="btn btn-light search">搜索</button>
    </div>
  </div>
  <table class="table table-hover">
    <thead>
      <tr>
        <th class="col-1">序号</th>
        <th class="col-3">标题</th>
        <th class="col-2">发布日期</th>
        <th class="col-5">所属栏目</th>
        <th class="col-1">操作</th>
      </tr>
    </thead>
    <tbody>
      
    </tbody>
  </table>
</div>
<script>
  //声明全局变量
  var baseUrl='http://182.92.83.218:7788/'
  //通过promise封装请求函数
  function getData(type,url){
    var p=new Promise((resolve,reject)=>{
      $.ajax({
        url:url,
        type:type,
        headers:{
          "Authorization":sessionStorage.getItem('token')
        },
        success:function(data){
          //每次请求处理的数据不一样，所以不能直接在这作数据处理
          resolve(data)
        }
      })
    })
    return p;
  }
  //加载所属栏目信息
  getData('GET',baseUrl+'category/findAll').then(function(data){
    //数据处理
    // console.log(data)
    data.data.forEach(function(item){
      $('.message .val').after(`<option>`+item.name+`</option>`);
    })
  })
   function getMessageData(url){
      return getData('GET',baseUrl+url).then(function(data){
          // console.log(data);
          data.data.list.forEach(function(item){
            $('.message tbody').append(`<tr>
            <td>`+item.id+`</td>
            <td>`+item.title+`</td>
            <td>`+new Date(item.publishTime).toLocaleDateString()+`</td>
            <td>`+item.category.name+`</td>
            <td>
              <span class="see">查看</span>
              <span class='edit'>编辑</span>
              <span class='delete'>删除</span>
            </td>
            </tr>`)
          })
        })
   }
   getMessageData('article/pageQuery?page=1&pageSize=10')
 
  //给搜索按钮绑定事件
  $('.message .search').click(function(){
    //获取用户输入的标题内容
    var titles=$('.message .titles').val();
    // console.log(titles)
    if(titles==''){
      url='article/pageQuery?page=1&pageSize=10'
    }else{
      url='article/pageQuery?page=1&pageSize=10&title='+titles
    }
    // console.log(url)
    $('.message tbody').empty();
    getMessageData(url);
  })
  //给删除按钮绑定事件
  $('.message tbody').on('click','.delete',function(event){
    var id=$(event.target).parent().parent().children().eq(0).text();
    // console.log(id);
    getData('GET',baseUrl+'article/deleteById?id='+id).then(function(data){
      if(data.status==200){
        confirm('您想要永久删除这条数据吗');
        alert(data.message);
        $('.message tbody').empty();
        getMessageData('article/pageQuery?page=1&pageSize=10');
      }
    })
  })
</script>
<style>
  .message .search{
    margin-right: 25px;
  }
</style>
